<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>张紫川个人网站</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/html5.js"></script>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

</head>

<body>

    <div class="swiper-container yc">
        <div class="tp clearfix yc">
            <div class="tp-1">
                <a href=""><img src="img/tx.jpg" alt=""></a>
                <div class="tp-3">
                    <span>Zhang zi Chuan</span>
                    <p>个人主页</p>
                </div>
            </div>
            <div class="tp-2">
                    <div class="swiper-pagination " id="aba"></div>
            </div>
            
            <!-- <div class="tp-2">
                <ul>
                    <li class="dy"><a href="">首页</a></li>
                    <li><a href="">我的简历</a></li>
                    <li><a href="">javascript</a></li>
                    <li><a href="">作品展示</a></li>
                    <li><a href="">博客</a></li>
                    <li><a href="">前端导航</a></li>
                </ul>
                <EMBED class="xx" src="img/李东哲%20-%20孤独的鸟.mp3" autostart="true" loop="true" width="80" height="0">
            </div> -->
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide yc">
                <div class="demo-1 clearfix">
                    <div class="content">
                        <div id="large-header" class="large-header">
                            <canvas id="demo-canvas"></canvas>
                            <div class="main-title">
                                <img src="img/tx.png" alt="">
                                <p class="lk">我叫张紫川</p>
                                <p class="lk">19岁</p>
                                <p class="lk">前端开发工程师</p>
                                <p class="lk">手机:18801385244</p>
                                <p class="lk">QQ:2572304343</p>
                                <span class="lk kl">只要你肯奋斗，没有什么是绝对不可能的</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide bl">
                <div class="slide qb bj yc">
                    <div class="container">
                        <div class="gy">
                            <h4>关于我</h4>
                            <div class="gy-1">
                                <p>- ABOUT ME -</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div class="xl">
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="dz">
                                                    <a href=""><img src="img/m-1.png" alt=""></a>
                                                </div>
                                                <div class="dz-1">
                                                    <span class="ws">学历</span>
                                                    <span></span>
                                                    <span class="wx">大专</span>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="dz">
                                                    <a href=""><img src="img/age.png" alt=""></a>
                                                </div>
                                                <div class="dz-1">
                                                    <span class="ws">年龄</span>
                                                    <span></span>
                                                    <span class="wx">20</span>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="dz">
                                                    <a href=""><img src="img/location.png" alt=""></a>
                                                </div>
                                                <div class="dz-1">
                                                    <span class="ws">籍贯</span>
                                                    <span></span>
                                                    <span class="wx">河北邯郸</span>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="dz">
                                                    <a href=""><img src="img/status.png" alt=""></a>
                                                </div>
                                                <div class="dz-1">
                                                    <span class="ws">目前</span>
                                                    <span></span>
                                                    <span class="wx">学生</span>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="zz clearfix">
                                            <span>1、个人简介：我来自于河北省邯郸市永年区</span>
                                            <p>2、自我评价：本人熟悉web前端，具备比较完备的专业知识，同时担任过班长和学习小组组长的工作，培养了我良好的组织、管理能力和团队合作精神，这相信可以使我能较快和较好地适应工作岗位。
                                            </p>
                                            <span>3、项目经验 (1)项目名称:DiAo官网(2)项目描述：该网页运用了
                                                HTML5、CSS3、JavaScript、Bootstrap、swipe等。</span>
                                        </div>
                                        <div class="zz-1">
                                            <ul>
                                                <li><a href=""><img src="img/m-2.png" alt=""></a></li>
                                                <li><a href=""><img src="img/m-8.png" alt=""></a></li>
                                                <li><a href=""><img src="img/m-3.png" alt=""></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide jk yc">
                <div class="container">
                    <div class="gy">
                        <h4>专业技能</h4>
                        <div class="gy-1">
                            <p>- HTML -</p>
                        </div>
                    </div>
                    <div class="row jz">
                        <div class="col-md-1">
                            <div class="wx">
                                <ul>
                                    <li>HTml</li>
                                    <li>CSS</li>
                                    <li>Javascript</li>
                                    <li>vue.js</li>
                                    <li>Ajax</li>
                                    <li>Bootstrap</li>
                                    <li>Swiper</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <ul class="kll">
                                <li class="km">95%</li>
                                <li class="km-1">90%</li>
                                <li class="km-2">60%</li>
                                <li class="km-4">70%</li>
                                <li class="km-5">60%</li>
                                <li class="km-6">99%</li>
                                <li class="km-7">96%</li>
                            </ul>
                        </div>
                        <div class="col-md-1">
                            <ul class="hx">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="zt">
                                <li>深刻理解Web标准，熟悉HTMl5新标签语言，能合理利用语意标签布局页面。</li>
                                <li>熟悉CSS3新特性属性及相关用法，有一定开发经验;了解CSS3语言。</li>
                                <li>熟悉JavaScript编程语言</li>
                                <li>正在学习 掌握还行。</li>
                                <li>熟悉JavaScript、Ajax、DOM等前端技术。</li>
                                <li>熟悉地掌握Bootstrap框架及源码的使用方法。</li>
                                <li>熟练使用Swiper框架开发页面动画效果，有一定开发经验。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <main class="lkl">
                    <div class="xm">
                        <h4>我的作品</h4>
                        <div class="xm-1">
                            <p>- Zuo Pin -</p>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a href="http://zzc234.gitee.io/taobao/">淘宝官网<span>仿站作品</span></a>
                                    </div>
                                    <img src="img1/img-one.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a href="http://zzc234.gitee.io/diao/">迪奥官网<span>仿站作品</span></a>
                                    </div>
                                    <img src="img/diao.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a href="http://zzc234.gitee.io/man_wei_boo/">漫威官网<span>仿站作品</span></a>
                                    </div>
                                    <img src="img/mw.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a
                                            href="https://gitee.com/PGWS/manway_bootstrop_web_page">酷狗官网<span>品牌设计</span></a>
                                    </div>
                                    <img src="img/kg.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a href="http://zzc234.gitee.io/duitang/">堆糖网站<span>仿站作品</span></a>
                                    </div>
                                    <img src="img1/img-five.jpeg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="heimo">
                                        <div class="kuang">
                                            <div class="hr-top"></div>
                                            <div class="hr-bottom"></div>
                                            <div class="hr-left"></div>
                                            <div class="hr-right"></div>
                                        </div>
                                    </div>
                                    <div class="zi">
                                        <a href="http://zzc234.gitee.io/jdcom/">京东购物车<span>实训项目</span></a>
                                    </div>
                                    <img src="img/gouwuche.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </main>

            </div>
            <div class="swiper-slide mn">
                <div class="container">
                    <div class="xm">
                        <h4>联系我</h4>
                        <div class="xm-1">
                            <p>- CONTACT ME -</p>
                        </div>
                    </div>
                    <div class="lg">
                        <h3>灵感 代码 梦想 未来</h3>
                        <ul>
                            <li>INSPIRAYION</li>
                            <li>CODE</li>
                            <li>DREAM</li>
                            <li>FUTURE</li>
                        </ul>
                        <p>互联网是个奇妙的行业，</p>
                        <p>身为前段工程师，更贴近用户，这种体验非常美妙</p>
                        <p>我热爱互联网，更热爱互联网前端技术，</p>
                        <p>三人行，必有我师</p>
                        <p>让我们在互联网的浪潮里一起不断成长！</p>
                        <p>手机：18801385244</p>
                        <p>QQ：2572304343</p>
                    </div>
                    <footer>
                        <div class="container">
                            <div class="wz">
                                <p>zhangzichuan @ 2019 - 2020 <a href="">2572304343@qq.com</a> 版权所有</p>
                            </div>
                        </div>

                    </footer>
                </div>

            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>














    <main class="lll">
        <div class="tp clearfix">
            <div class="tp-1">
                <a href=""><img src="img/tx.jpg" alt=""></a>
                <div class="tp-3">
                    <span>Zhang zi Chuan</span>
                    <p>个人主页</p>
                </div>
            </div>
            <div class="tp-2">
                <ul>
                    <li class="dy"><a href="">首页</a></li>
                    <li><a href="">我的简历</a></li>
                    <li><a href="">javascript</a></li>
                    <li><a href="">作品展示</a></li>
                    <li><a href="">博客</a></li>
                    <li><a href="">前端导航</a></li>
                </ul>
                <EMBED class="xx" src="img/李东哲%20-%20孤独的鸟.mp3" autostart="true" loop="true" width="80" height="0">
            </div>
        </div>
        <div class="sj">
            <img src="img/beijing.jpg" alt="">
        </div>
        <div class="sj-1">
            <h4>关于我</h4>
            <div class="sj-2">
                <p>- ABOUT ME -</p>
            </div>
        </div>
        <div class="kl clearfix">
            <div class="sj-3">
                <ul>
                    <li><a href=""><img src="img/m-1.png" alt=""></a>
                        <p>学历:大专</p>
                    </li>
                    <li><a href=""><img src="img/age.png" alt=""></a>
                        <p>年龄:20</p>
                    </li>
                    <li><a href=""><img src="img/location.png" alt=""></a>
                        <p>籍贯:河北邯郸</p>
                    </li>
                    <li><a href=""><img src="img/status.png" alt=""></a>
                        <p>目前:在读</p>
                    </li>
                </ul>
            </div>
            <div class="kj">
                <ul>
                    <li>姓 名： 张紫川 <span>性 别： 男</span></li>
                    <li>出生年月:2000.10.11 民 族： 汉</li>
                    <li>学 历： 大专 <span class="tt">专 业： Web前端</span></li>
                    <li>毕业学校： 泊头职业学院</li>
                    <li>联系电话： 18801385244</li>
                    <li>住 址： 河北省邯郸市永年区</li>
                    <li>QQ邮箱： 2572304343@qq.com</li>
                    <li>掌握技能：熟练掌握HTML5、CSS3、JavaScript、Bootstrap、Vue</li>
                </ul>
                <div class="kj-1">
                    <ul>
                        <li>
                            <h5>教育背景:</h5>
                            <p><span>2018--2020</span><span>泊头职业学院</span><span>web前端工程师</span><span>大专</span></p>
                        </li>
                        <li>
                            <h5>求职意向:</h5>
                            <p><span>期望地点：杭州</span><span>工作：web前端工程师</span></p>
                        </li>
                        <li>
                            <h5>自我评价：</h5>
                            <p>本人熟悉web前端，具备比较完备的专业知识，同时多年的班长工作，培养了我良好的组织、管理能力和团队合作精神，这相信可以使我能较快和较好地适应工作岗位。</p>
                        </li>
                        <li>
                            <h5>项目经验：</h5>
                            <p><span>(1) 项目名称：DiAo官网</span></p>
                            <span>(2) 项目描述：该网页运用了 HTML5、CSS3、JavaScript、Bootstrap、swipe等。</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
    <script src="js/TweenLite.min.js"></script>
    <script src="js/EasePack.min.js"></script>
    <script src="js/rAF.js"></script>
    <script src="js/demo-1.js"></script>
    <script src="js.js"></script>


</body>

</html>